import { ref, onUnmounted } from 'vue';

const lazyImage = {
  // 指令的 mounted 钩子，当指令绑定的元素被插入到 DOM 中时调用
  mounted(el, binding) {
    //IntersectionObserver 可能有兼容性问题
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          console.log('---?')
          // 当图片进入可视区域时，将 data-src 的值赋给 src
          el.src = binding.value;
          // 停止观察该元素
          observer.unobserve(el);
        }
      });
    });
    // 开始观察该元素
    observer.observe(el);

    // 组件卸载时停止观察，避免内存泄漏
    onUnmounted(() => {
      observer.disconnect();
    });
  },
};

export default lazyImage;